<template>
  <div class="anime-text">
    <h1 class="title">荒</h1>
    <div class="site-subtitle">
      <span class="subtitle">
        {{ title }}
        <span class="typed-cursor"> |</span>
      </span>
    </div>
  </div>
</template>

<script setup lang="ts" name="AnimeText">
import { onMounted, onUnmounted, ref } from 'vue';
const subtitle = ref([
  '满地是六便士奇迹，我抬头看月光的迷离。',
  '只身断万古，回首寂无人。',
  '荒，我的兄弟，魂兮归来，以你之资，气吞古今，怎么会不在了。',
  '世界上有两个我，一个在文字里白马春衫慢慢行，一个在生活里蝇营狗苟无穷年。',
  '三十年河东，三十年河西，莫欺少年穷！',
  '感知于万物，化一切为可能。',
  '胸有千里志，脚有万里路。',
  '志之所趋，无远勿届，穷山复海不能限也；志之所向，无坚不摧。',
]);
const subtitleIndex = ref(0);
const title = ref('');
const showIndex = ref(1);
let add: ReturnType<typeof setInterval>;
let subtract: ReturnType<typeof setInterval>;

const infoAdd = () => {
  add = setInterval(() => {
    var shower = subtitle.value[subtitleIndex.value].substr(0, showIndex.value);
    showIndex.value++;
    title.value = shower;
    if (showIndex.value > subtitle.value[subtitleIndex.value].length) {
      setTimeout(() => {
        infoSubtract();
      }, 1500);
      clearInterval(add);
    }
  }, 200);
};
const infoSubtract = () => {
  subtract = setInterval(() => {
    var shower = subtitle.value[subtitleIndex.value].substr(0, showIndex.value);
    showIndex.value--;
    title.value = shower;
    if (showIndex.value == -1) {
      showIndex.value = 1;
      if (subtitleIndex.value < subtitle.value.length - 1) {
        subtitleIndex.value++;
      } else {
        subtitleIndex.value = 0;
      }
      setTimeout(() => {
        infoAdd();
      }, 1000);
      clearInterval(subtract);
    }
  }, 100);
};
onMounted(() => {
  infoAdd();
});
onUnmounted(() => {
  add && clearInterval(add);
  subtract && clearInterval(subtract);
});
</script>

<style lang="scss" scoped>
.anime-text {
  padding: 0 10px;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  text-align: center;
  width: 100%;
  .title {
    width: 100%;
    color: #fff;
    font-size: 42px;
    margin-bottom: 10px;
  }
  .site-subtitle {
    width: 100%;
    color: #fff;
    font-size: 25px;
    display: flex;
    align-content: center;
    justify-content: center;
    height: 35px;
    line-height: 35px;
  }
  .subtitle {
    display: inline-block;
  }
  .typed-cursor {
    display: inline-block;
    animation: blink 1s linear infinite;
  }
}
@keyframes blink {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
</style>
